퍼플심_02_레드팀 시뮬레이션 구현

MVP의 목표

기획 단계에서 전체 그림은 그렸지만, 개발의 첫 단추는 레드팀 시뮬레이션으로 꿰기로 했다.
공격자가 되어 전체 작전 프로세스를 경험해보는 것. 이것이 MVP의 1차 목표다.

작전 시작 전에 무엇을 알아야 하고, 어떤 흐름으로 공격이 진행되는지를 보여주는 것에 집중했다.

화면 구성

React2Shell 시나리오에 대한 레드팀/블루팀 선택 인터페이스
레드팀 작전과 블루팀 작전은 크게 연관이 없고 시나리오만 공유한다.
그냥 내가 하고 싶은 걸 하고 싶을 때 하는 구조다.

레드팀 워크벤치에 진입하면 가장 먼저 작전 브리핑(Briefing) 페이지가 뜬다.

• RT_ROE.pdf: 실제 작전 문서처럼 꾸민 목표와 범위. 이를 통해 레드팀 작전 시 필요한 항목들을 학습한다.
• Scenario.md: 게임적 재미를 위한 시나리오 배경 스토리.
• News와 메신저: 게임적 요소.
  인프라 구축은 아직 어떻게 할지 방향을 못잡아서 가이드 형태로만 정리한 상태이다.

본격적으로 작전 도구에서 레드팀을 플레이할 수 있다.

VS Code를 유사하게 클론한 인터페이스를 구현했다.
실제 레드팀 작전 단계를 따라 6단계(Phase)로 공격 단계를 나누었다.
각 단계마다 화면 구성은 VS Code의 레이아웃을 차용하여 익숙함을 주면서도, 학습에 최적화된 배치를 고민했다.

1. 상단 패널 (Guide & Instruction):
   • 화면 가장 위쪽에 배치되어, 현재 단계에서 '무엇을 해야 하는지'를 명확히 알려준다.
   • 개념 설명(Concept)과 구체적인 지침(Instruction), 그리고 사용할 도구 가이드가 탭으로 제공된다.
2. 좌측 사이드바 (Explorer):
   • 프로젝트 파일 탐색기뿐만 아니라, 사용 가능한 공격 도구(Tools) 목록을 보여준다.
   • 도구를 클릭하면 상단 가이드 패널에 해당 도구의 사용법이 뜬다.
3. 메인 워크스페이스 (Terminal & Editor):
   • 화면 하단은 실제 작업 공간으로, 좌우로 분할된다.
   • Terminal(좌): 가이드된 명령어를 입력하고 실행 결과를 확인하는 곳.
   • Editor(우): 메모를 남기거나(Memo.md), 익스플로잇 코드를 작성/확인(Exploit.py)하는 곳.

상태 관리

기술적으로는 Zustand를 사용해 진행 상황을 관리한다.
사용자가 필요한 작업을 모두 수행하면 다음 페이즈로 넘어갈 수 있도록 했다.
이때 체크리스트를 통해 사용자가 필요한 작업을 모두 수행했는지 확인한다.
부족한 부분이 있다면 다음 단계로 넘어가지 않고 미수행 작업 목록을 제시할 예정이다.
다음 페이즈로 넘어가면 가이드나 도구 등 내용도 바뀐다.

MVP 단계에서는 테스트를 위해 체크리스트는 아직 미구현이다. 그냥 다음 페이즈 버튼 누르면 넘어간다.